<template>
  <div class="wrapper">
    <div class="itemWrapper" v-for="nav in nav_list" :key='nav.cid'>
      <div class="imgWrapper">
        <img :src="nav.icon_url" :alt="nav.name">
      </div>
      <div class="textWrapper">
        <div class="text">
          {{ nav.name}}
        </div>
      </div>
    </div>  
  </div>
</template>


<script>

export default {
  name: "homenav",
  props:{
    nav_list:Array
  },

  data() {
    return {};
  },
  methods: {}
};
</script>


<style lang="less" scoped>
  .wrapper{
    // background-color: rgb(235, 187, 187);
    // padding: 1rem 0; 

    .itemWrapper{
      display: inline-block;
      width: 20%;

      .imgWrapper{
        text-align: center;
        padding-top: 1rem;
        overflow: hidden;
        background-color: #fff;

        img{
          width: 60%;
        }
      }

      .textWrapper{
        padding-top: 1rem;
        background-color:#fff;

       .text{
         text-align: center;
         padding-bottom: 1rem;
       }
      }
    }
  }

</style>